<script lang="ts">
import router from '@/router'
import { watch } from 'vue'
import { defineComponent, ref, onUnmounted, onMounted } from 'vue'
import { getSearchRecovery, getSearchResult, getSearchRecomment } from '../api/search'
import { useRecordStore } from '../stores/record'
export default defineComponent({
  components: {},
  setup() {
    const keywords = ref('')

    const seaFlag = ref(true)

    const resFlag = ref(true)

    const recordStore: any = useRecordStore()

    const recordList: any = ref([])

    // 搜索建议

    var recList: any = ref<Array<any>>([])

    const getSearchRecommentFun: () => void = (): void => {
      getSearchRecomment({ keyword: keywords.value }).then((data: any) => {
        console.log(data)
        recList.value = data.data.list
      })
    }

    // 侦听搜索词
    watch(keywords, (newVal) => {
      if (newVal) {
        seaFlag.value = false
        resFlag.value = true
        getSearchRecommentFun()
      } else if (newVal == '') {
        seaFlag.value = true
      }
    })

    // 返回按钮判断
    const backBtn = () => {
      if (keywords.value.trim()) {
        keywords.value = ''
        seaFlag.value = true
        resFlag.value = true
      } else {
        router.back()
      }
    }

    // 搜索结果
    var resList: any = ref<Array<any>>([])

    const getSearchResultFun: () => void = (): void => {
      getSearchResult({ name: keywords.value }).then((data: any) => {
        console.log(data)
        resList.value = data.data.list
      })
    }

    let search_record = ref('')

    //   搜索功能
    const search = () => {
      if (keywords.value.trim()) {
        seaFlag.value = true
        resFlag.value = false

        let index = recordStore.recordList.findIndex((item: any) => {
          return item == keywords.value
        })

        if (index == -1) {
          recordStore.recordList.push(keywords.value)
        }

        getSearchResultFun()
      }
    }

    // 搜索发现
    var coveryList: any = ref<Array<any>>([])

    const getSearchRecoveryFun: () => void = (): void => {
      getSearchRecovery().then((data: any) => {
        // console.log(data)
        coveryList.value = data.data.list
      })
    }

    // 发现点击搜索
    const coveryHander = (id: any) => {
      let index = coveryList.value.findIndex((item: any) => {
        return item.id == id
      })

      keywords.value = coveryList.value[index].text

      search()
    }

    // 历史搜索
    const historyHander = (id: any) => {
      let index = recordList.value.findIndex((item: any) => {
        return item.id == id
      })

      keywords.value = recordList.value[index]

      search()
    }

    // 建议点击搜索
    const recomHander = (value: any) => {
      let index = recList.value.findIndex((item: any) => {
        return item.value == value
      })

      keywords.value = recList.value[index].value

      search()
    }

    const detailHander = (path: any, goods_id: any) => {
      router.push({
        path,
        query: {
          goods_id
        }
      })
    }

    // 删除搜索记录
    const clear = () => {
      recordList.value = recordStore.recordList = []
    }

    onUnmounted(() => {})

    onMounted(() => {
      getSearchRecoveryFun()
      recordList.value = recordStore.recordList
    })

    return {
      keywords,
      seaFlag,
      resFlag,
      backBtn,
      search,
      coveryList, // 搜索发现
      resList, // 搜索结果
      recList, // 搜索建议
      coveryHander, // 发现点击
      recomHander, // 建议点击
      recordList, // 搜索历史
      clear, // 删除历史
      detailHander,
      historyHander
    }
  }
})
</script>

<template>
  <!-- 搜索页面 -->
  <div class="search">
    <!-- 搜索首页 -->
    <div class="search_home">
      <!-- 搜索顶部 -->
      <div class="search_top">
        <div class="back_btn iconfont icon-zuojiantou" @click="backBtn"></div>
        <!-- 搜索框 -->
        <div class="search_box">
          <span class="iconfont icon-sousuoxiao"></span>
          <input type="text" class="search_int" placeholder="须祢" v-model="keywords" />
        </div>
        <!-- 搜索按钮 -->
        <div class="search_btn" @click="search">搜索</div>
      </div>
      <!-- 搜索历史 -->
      <div class="search_history" v-show="seaFlag && resFlag">
        <h3 class="title" v-if="recordList.length">
          <span>搜索历史</span><i class="iconfont icon-shanchu" @click="clear"></i>
        </h3>
        <div class="his_items">
          <span
            class="item"
            v-for="(item, index) in recordList"
            :key="index"
            @click="historyHander(item.id)"
            >{{ item }}</span
          >
        </div>
      </div>
      <!-- 搜索发现 -->
      <div class="search_history" v-show="seaFlag && resFlag">
        <h3 class="title"><span>搜索发现</span></h3>
        <div class="his_items" style="border-bottom: 0">
          <span
            class="item"
            v-for="item in coveryList"
            :key="item.id"
            @click="coveryHander(item.id)"
            >{{ item.text }}</span
          >
        </div>
      </div>
      <!-- 搜索建议 -->
      <div class="search_recomment" v-show="!seaFlag">
        <div
          class="rec_item"
          v-for="item in recList"
          :key="item.match_value"
          @click="recomHander(item.value)"
        >
          {{ item.value }}
        </div>
      </div>
    </div>
    <!-- 搜索结果 -->
    <div class="search_result" v-show="!resFlag">
      <!-- 商品 -->
      <div class="goods">
        <div class="shop_show">
          <div
            class="shop_item"
            v-for="item in resList"
            :key="item.goods_id"
            @click="detailHander('/detail', item.goods_id)"
          >
            <img
              :src="item.cover_url"
              alt=""
              referrerpolicy="no-referrer"
              v-lazy="item.cover_url"
            />
            <div class="shop_dec txt-cut">
              <!-- recommend -->
              <img :src="item.tag == 1 ? '../../src/assets/img01/new.png' : ''" alt="" />{{
                item.name
              }}
            </div>
            <div class="price">
              <i>￥</i><span>{{ item.price / 100 }}</span
              ><span class="zero">.00</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.search {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  // 搜索首页
  .search_home {
    // 搜索顶部
    .search_top {
      display: flex;
      align-items: center;
      height: 42px;
      line-height: 42px;
      .back_btn,
      .search_btn {
        width: 10%;
        padding: 0 5px;

        text-align: center;
      }
      .search_btn {
        color: #ff8678;
      }
      .search_box {
        display: flex;
        flex: 1;
        height: 34px;
        line-height: 34px;
        border-radius: 20px;
        background-color: #f9f9f9;
        span {
          font-size: 14px;
          padding: 0 10px;
          color: #9696a1;
        }
        .search_int {
          flex: 1;
          border: 0;
          font-size: 13px;
          background-color: transparent;
        }
      }
    }
    // 搜索历史
    .search_history {
      padding: 0 15px;
      margin-top: 20px;
      .title {
        display: flex;
        line-height: 24px;
        justify-content: space-between;
        align-items: center;
        i {
          color: #e7e7ea;
          font-size: 18px;
        }
      }
      .his_items {
        display: flex;
        flex-wrap: wrap;
        margin-top: 8px;
        padding-bottom: 8px;
        border-bottom: 1px solid #eee;
        .item {
          padding: 10px 16px;
          border-radius: 5px;
          margin-right: 8px;
          margin-bottom: 8px;
          font-size: 14px;
          background: #f3f3f4;
        }
      }
    }
    // 搜索建议
    .search_recomment {
      padding: 12px 16px;
      .rec_item {
        padding: 12px;
        padding-left: 0;
        color: #ff8678;
        font-size: 14px;
        border-bottom: 1px solid #eee;
      }
    }
    // 搜索结果
  }

  .search_result {
    padding-top: 3px;
    background-color: #f3f3f4;
    .goods {
      .shop_show {
        display: flex;
        padding: 0 12px;
        flex-wrap: wrap;
        margin-top: 18px;
        font-size: 14px;
        justify-content: space-between;
        .shop_item {
          width: 49%;
          border-radius: 3px;
          margin-bottom: 10px;
          background-color: #fff;
          img {
            width: 100%;
          }
          .shop_dec {
            line-height: 18px;
            padding: 8px;
            padding-bottom: 0;
            margin-bottom: 7px;
            img {
              margin-right: 8px;
              display: inline-block;
              width: 40px;
              vertical-align: bottom;
            }
          }
          .price {
            padding-left: 5px;
            font-size: 14px;
            color: #16162e;
            font-style: italic;
            font-weight: 700;
            margin-bottom: 15px;
            i {
              font-size: 12px;
              font-style: italic;
              font-family: 'Fira Sans Black Italic';
            }
            span {
              font-family: 'Fira Sans Black Italic';
            }
            .zero {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
</style>
